<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        td {
            border: 1px solid red;
        }
        
        table {
            border-collapse: collapse;
        }
        
        td {
            padding: 10px 30px;
        }
    </style>
</head>

<body>

</body>

</html>
<script>
    //一.for循环的基本控制结构。
    //for 语句也是一种前测试循环语句，但它具有在执行循环之前初始化变量和定义循环后要执行的代码的能力。
    // while(){}
    // for (初始值; 限制条件; 迭代语句) {
    //     满足条件执行的循环体
    // }

    //初始值，限制条件，迭代语句中都可以放多条语句。

    // var i = 1;
    // while (i <= 10) {
    //     document.write(i);
    //     i++;
    // }

    // document.write('<hr>');

    // for (var i = 1, sum = 0; i <= 10; i++) {
    //     document.write(i);
    // }


    // document.write('<table border=1>');
    // var i = 1;
    // while (i <= 9) { //循环9次
    //     document.write('<tr>');

    //     var j = 1;
    //     while (j <= i) { //内层的循环和外层的次数有关。外层第1次循环，内层循环1次，外层第2次循环，内层循环2次，以此类推
    //         document.write('<td>' + j + 'x' + i + '=' + (i * j) + '</td>');
    //         j++;
    //     }

    //     document.write('</tr>');
    //     i++;
    // }
    // document.write('</table>');

    //for循环改写
    document.write('<table border=1>');
    for (var i = 1; i <= 9; i++) {
        document.write('<tr>');
        for (var j = 1; j <= i; j++) {
            document.write('<td>' + j + 'x' + i + '=' + (i * j) + '</td>');
        }
        document.write('</tr>');
    }
    document.write('</table>');
</script>